<template>
	<view class="shopcar-box" v-if="cart.length!=0 ">
		<!-- 购物车标题区域 -->
		<view class="shopcar-title">
			<view class="shopcar-title-dis">
				<uni-icons type="shop" size="20"></uni-icons>
				<text class="shopcar-title-text">购物车</text>
			</view>
		</view>
		<!-- 购物车商品信息 -->
		
		<uni-swipe-action class="shopcar-shop-box">
			<uni-swipe-action-item :right-options="options" @click="deleteshop(item)"
			class="shopcar-shop-item" v-for="(item,index) in cart" :key="index">
				<view class="goods-img" >				
					<radio :checked="item.goods_state" color="red" @click="ifgouxuan(item)"/>					
					<image :src="item.goods_small_logo" mode="" ></image>
				</view>
				<!-- 商品右侧信息描述区域 -->
				<view class="goods-detail" >
					<view class="goods-detail-text" >{{item.goods_name}}</view>
					<view class="goods_detail-number">
						<view class="goods-detail-charge">￥{{item.goods_price}}</view>
						<uni-number-box :min="1" :max="9" v-model="item.goods_count" @change="changevalue(item)" @blur="blurs"></uni-number-box>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 自定义组件结算 -->
		<view class="">
			<v-jiesuan></v-jiesuan>
		</view>
	</view>
	<view class="empty" v-else>
		<image src="../../static/uni.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// cart:[]
				      options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: '#c00000'
				            }
				        }, 
				      ]
			};
		},
		computed:{
			//获取购物车商品综述
			cart(){
				return this.$store.state.cart.cart
			},
			total(){
				 return this.$store.getters.shopcartotal
			}
		},
		watch:{
			total(newvalue){
				uni.setTabBarBadge({
					index:2,//此处为tabbar页面的索引
					text:this.total+""
				})
			}
		},
		onShow() {
			 this.showtabbarindex();
			// console.log(this.$store.state.cart);
			// console.log(this.cart[0].goods_name);
			// this.cart=this.$store.state.cart
			 console.log(this.cart);
		},
		methods:{
			//创建一个获取购物车徽标的回调函数
			showtabbarindex(){
				uni.setTabBarBadge({
					index:2,//此处为tabbar页面的索引
					text:uni.getStorageSync("total")
				})
			},
			// 点击事件回调 是否勾选
			ifgouxuan(item){
				item.goods_state=!item.goods_state
				if(item.goods_state==false){
					uni.setTabBarBadge({
						index:2,//此处为tabbar页面的索引
						text:uni.getStorageSync("total")-item.goods_count+""
					})
					uni.setStorageSync("total",uni.getStorageSync("total")-item.goods_count+"")
				}else{
					uni.setTabBarBadge({
						index:2,//此处为tabbar页面的索引
						text:JSON.parse(uni.getStorageSync("total"))+item.goods_count+""
					})
					uni.setStorageSync("total",JSON.parse(uni.getStorageSync("total"))+item.goods_count+"")
				}
			},
			// 添加减少商品数量回调
			changevalue(item){
				//会收到一个默认参数v，每当数量改变时v就是商品数量
				// console.log(v);
				// console.log(v);
				console.log(item);
				this.$store.commit("addgooddetail",item)
				uni.setTabBarBadge({
					index:2,//此处为tabbar页面的索引
					text:uni.getStorageSync("total")
				})
				 // uni.setStorageSync("total",JSON.parse(uni.getStorageSync("total"))+"")
			},
			blurs(){
				// console.log("我是去焦点了");
				uni.setTabBarBadge({
					index:2,//此处为tabbar页面的索引
					text:uni.getStorageSync("total")
				})
			},
			deleteshop(item){
				// console.log(item);
				// 通知mutations删除对应id的商品
				this.$store.commit("removeshop",item.goods_id)
			}
		}
		
	}
</script>

<style lang="scss">
	.shopcar-box{
		padding-bottom: 50px;
	}
	.shopcar-title{
		margin: 8px 5px;
		.shopcar-title-dis{
			display: flex;
			align-items: center;
			.shopcar-title-text{
				font-size: 14px;
				margin-left: 5px;
			}
		}

	}
.shopcar-shop-box{
	
	.shopcar-shop-item{
		// width: 750rpx;
		// height: 120px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		border: 2px solid #efefef ;
		padding: 8px;
		.goods-img{
			width: 130px;
			height: 120px;
			display: flex;
			align-items: center;
			
			radio{
				
			}
			image{
				width: 100px;
				height: 120px;
			}
			
		}
		.goods-detail{
			// width: 220px;
			margin-left: 12px;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
			font-size: 13px;
			.goods-detail-text{
				
			}
			.goods_detail-number{
				display: flex;
				justify-content: space-between;
				// flex: 1;
				.goods-detail-charge{
					color: red;
				}
			}

		}
	}
}
.empty{
	width: 100%;
	height: 560px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	image{
		
	}
}
</style>
